<!--
3D转换之：3D旋转
    让元素沿着x、y、z或自定义的轴旋转。

    transform: rotateX(x);
      旋转方向：正值-后仰，负值-前倾。
      案例：单杠。

    transform: rotateY(y);
      案例：钢管舞、旋转木马。

    transform: rotateZ(z);
      案例：怼你脸上的钻头、抽奖转盘、风车。（类似2D旋转）

    transform: rotate3d(x,y,z,deg);
      自定义旋转轴（矢量方向的轴）
      xyz：填写1或0，表示有或无
        x轴：1,0,0
        y轴：0,1,0
        z轴：0,0,1
        矢量方向：1,1,0（左上角至右下角）  // 只要合理就行

拓展：
  1）单位
    deg   度数
    turn  周数 1turn = 360deg
  2）与2D通用的属性
    transform-origin  旋转中心
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    /* 视距（透视） */
    perspective: 200px;
  }
  img {
    display: block;
    margin: 0 auto;
    transition: all 2s;
  }
  img:first-child:hover {
    transform: rotateX(-90deg);
  }
  img:nth-child(2):hover {
    transform: rotateY(60deg);
  }
  img:nth-child(3):hover {
    transform: rotateZ(-0.5turn);
  }
  img:last-child:hover {
    transform: rotate3d(1, 1, 1, 60deg);
  }
</style>

<img src="./img/item.png" alt="" />
<img src="./img/item.png" alt="" />
<img src="./img/item.png" alt="" />
<img src="./img/item.png" alt="" />
